<template>
  <div class="tags-view-container">
    <div class="tags-view-wrapper">
      <el-scrollbar wrap-class="tags-view-scrollbar">
        <div class="tags-view-list">
          <el-tag
            v-for="tag in visitedTags"
            :key="tag.path"
            :class="isActive(tag) ? 'active-tag' : ''"
            class="tag-item"
            closable
            :effect="isActive(tag) ? 'dark' : 'plain'"
            @click="handleClick(tag)"
            @close="handleClose(tag)"
          >
            {{ tag.meta.title }}
          </el-tag>
        </div>
      </el-scrollbar>
    </div>
    
    <div class="tags-view-actions">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-icon><More /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
            <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { More } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 访问过的标签列表
const visitedTags = ref([])

/**
 * @description 判断标签是否为当前激活标签
 * @param {Object} tag - 标签对象
 * @returns {boolean} 是否为当前激活标签
 */
const isActive = (tag) => {
  return tag.path === route.path
}

/**
 * @description 添加标签
 * @param {Object} route - 路由对象
 */
const addTag = (route) => {
  const { path, meta, name } = route
  
  // 如果标签中设置了 noTagsView，则不添加到标签导航
  if (meta && meta.noTagsView) return
  
  // 标签是否已存在
  const isExist = visitedTags.value.some(tag => tag.path === path)
  
  if (!isExist && meta && meta.title) {
    visitedTags.value.push({
      path,
      name,
      meta: { ...meta }
    })
  }
}

/**
 * @description 处理标签点击
 * @param {Object} tag - 标签对象
 */
const handleClick = (tag) => {
  router.push(tag.path)
}

/**
 * @description 处理标签关闭
 * @param {Object} tag - 标签对象
 */
const handleClose = (tag) => {
  // 找到标签索引
  const index = visitedTags.value.findIndex(item => item.path === tag.path)
  
  // 如果找到索引则删除标签
  if (index !== -1) {
    visitedTags.value.splice(index, 1)
  }
  
  // 如果关闭的是当前激活标签，则导航到最后一个标签
  if (isActive(tag) && visitedTags.value.length) {
    const latestTag = visitedTags.value[visitedTags.value.length - 1]
    router.push(latestTag.path)
  }
}

/**
 * @description 处理下拉菜单命令
 * @param {string} command - 命令
 */
const handleCommand = (command) => {
  if (command === 'closeOthers') {
    // 关闭其他标签
    visitedTags.value = visitedTags.value.filter(tag => isActive(tag))
  } else if (command === 'closeAll') {
    // 关闭所有标签
    visitedTags.value = []
    router.push('/')
  }
}

// 监听路由变化，添加标签
watch(
  () => route.path,
  () => {
    addTag(route)
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.tags-view-container {
  position: relative;
  height: 34px;
  width: 100%;
  background-color: transparent;
  // border-bottom: 1px solid var(--dark-border-color-light);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  
  .tags-view-wrapper {
    flex: 1;
    overflow: hidden;
    padding: 2px 10px;
    
    .tags-view-scrollbar {
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      width: 100%;
      
      .tags-view-list {
        display: inline-block;
        
        .tag-item {
          margin: 2px 4px 2px 0;
          cursor: pointer;
          height: 26px;
          line-height: 26px;
          // border-color: var(--border-color-light);
          border: var(--tag-border);
          // color: var(--text-color);
          color: var(--tag-color);
          // background-color: var(--bg-color-secondary);
          background-color: var(--tag-bg);
          border-radius: 4px;
          &:hover {
            opacity: 0.85;
          }
          
          &.active-tag {
            background-color: var(--tag-active-bg);
            color: #fff;
            border: var(--tag-active-border);
            border-radius: 4px;
            
            &::before {
              content: '';
              background: #fff;
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              position: relative;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
  
  .tags-view-actions {
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    color: var(--text-color);
    
    .el-dropdown-link {
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      
      &:hover {
        color: var(--primary-color);
      }
    }
  }
}
</style> 